<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
        
    </style>
</head>
<body>

    <div id="box">1</div>
    <div id="box">2</div>
    <div id="box">3</div>
    <div class="cont">4</div>
    <div class="cont">5</div>
    <div class="cont">6</div>
    <div class="msg">
        <div class="xbox">
            <em>倾斜文字1</em>
            <em>倾斜文字2</em>
        </div>
        <em>倾斜文字3</em>
        <em>倾斜文字4</em>
    </div>
    <span>7</span>
    <span>8</span>
    <span>9</span>
    <input type="text" name="username">
    <input type="text" name="password">
    <input type="text" name="password">
    
</body>
<script>

    // 单个：
    var box = document.getElementById("box");
    console.log(box);
    console.log(typeof box);

    box.style.background = "red";

    // 多个：
    // 注意：如果选择器选择到的元素以数组形式呈现，在进行元素操作时，一定要先解析，再操作
    var cont = document.getElementsByClassName("cont");
    console.log(cont);
    console.log(typeof cont);
    // 无法给undefined设置background属性
    cont[0].style.background = "green";

    var span = document.getElementsByTagName("span");
    console.log(span);
    console.log(typeof span);

    var pw = document.getElementsByName("password");
    console.log(pw);
    console.log(typeof pw);

    console.log("========")
    // ============
    // 单个：
    var ele = document.querySelector("#box");
    console.log(ele);
    var ele = document.querySelector(".cont");
    console.log(ele);
    var ele = document.querySelector("span");
    console.log(ele);
    var ele = document.querySelector(".msg em")
    console.log(ele);
    var ele = document.querySelector(".msg>em")
    console.log(ele);

    // 你掌握的css选择器写法的数量 决定了 querySelector或querySelectorAll能写出多少种形式
    
    console.log("========")

    // 多个：
    // document.querySelectorAll()
    var ele = document.querySelectorAll("#box");
    console.log(ele);
    var ele = document.querySelectorAll(".cont");
    console.log(ele);
    var ele = document.querySelectorAll("span");
    console.log(ele);
    var ele = document.querySelectorAll(".msg em");
    console.log(ele);
    var ele = document.querySelectorAll(".msg>em");
    console.log(ele);


    





    
</script>
</html>